import { computed, defineComponent, onMounted, PropType, ref, Ref, toRaw } from 'vue';
import { Modal, Pagination, Popconfirm, Button, Table, TableColumn, Tabs, TabPane } from 'ant-design-vue';
import qs from 'qs';
import type { LongTouch, ReqParam, ResData, ResDataSearch } from '@/domain/dataBoard/types/longclass/touch';
import { ChildId, CommonReqParam, ErrorChildId } from '@/domain/dataBoard/types/common';
import PageTable from '../../components/pageTable';
import Searchlist from '../../components/searchList';
import { useTouchData } from '@/domain/dataBoard/hooks/longClass/touch';
import Total from '../../components/total';
import { downLoadUrl } from '@/domain/dataBoard/api/download';
import { Page, selectParam } from '@/domain/common/types/page';
import ExportDate from '../../components/exportDate';
import lodash from 'lodash';
import { CHILD_ID, DATA_TYPE, PAGE } from '@/domain/dataBoard/variable/common';
import { searchInfo, resetSearch, getTableList } from '@/domain/dataBoard/hooks/pageTable';

export default defineComponent({
  name: 'touchBase',
  props: {
    childId: {
      type: Number as PropType<ChildId>,
      default: ErrorChildId.DefaultChildId
    },
    add: {
      type: Function as PropType<(title: string, id: number) => void>,
      default: () => {}
    }
  },
  setup(props, { slots }) {
    const {
      IDString,
      dataSource,
      rowlist,
      paging,
      searchParam,
      columnlist,
      searchList,
      setSizeChange,
      loadTable,
      getSelectRowsCallBack,
      opGroupCallBack,
      reloadList,
      overview,
      tableLoading
    } = useTouchData(props.childId);

    onMounted(() => {});
    const cellClick = (prop: string, record: LongTouch, relevant: number) => {
      if (props.add) {
        const child_id = relevant ? relevant : record.child_id;
        props.add(record[prop as keyof LongTouch].toString(), child_id);
      }
    };
    // 搜索查询
    // const searchInfo = async (param: selectParam) => {
    //   const params: selectParam = {};
    //   // 重置请求参数
    //   for (let key in param) {
    //     if (Array.isArray(param[key as keyof ReqParam])) {
    //       params[key] = (param[key] as Array<number>).join('|');
    //     } else {
    //       params[key] = param[key as keyof ReqParam];
    //     }
    //   }
    //   rowlist.value = (await loadTable(toRaw(params))).data.datas;
    // };
    // 搜索重置
    const resetSearch = async (params: Partial<ReqParam>, reset: Function) => {
      reset();
      Object.keys(searchParam).forEach((item) => {
        if (item !== CHILD_ID) {
          delete searchParam[item as keyof Partial<Page | CommonReqParam | Partial<LongTouch & Page>>];
        }
      });
      searchParam[PAGE.PAGE] = 1;
      searchParam[PAGE.PAGE_SIZE] = 10;
      // rowlist.value = (await loadTable(param)).data.datas;
    };
    const hrefUrl = computed(() => {
      let tempParams = lodash.omit(searchParam, [PAGE.PAGE, PAGE.PAGE_SIZE]);
      const params = { ...tempParams, data_type: DATA_TYPE.LONG_TOUCH };
      return downLoadUrl + '?' + qs.stringify(params);
    });

    return () => (
      <>
        <div class={'relative'}>
          <Searchlist
            searchList={searchList.value}
            onResetEvent={resetSearch}
            onSearchEvent={(param: selectParam) => searchInfo<selectParam>(param, rowlist, loadTable, searchParam)}
            onReloadList={(params) => reloadList(params)}
          ></Searchlist>
        </div>
        <Total overview={overview.value}></Total>
        <div class={' relative'}>
          <div class={'title-h justify-between mt-8'}>
            明细数据
            <div>
              <ExportDate hrefUrl={hrefUrl.value}></ExportDate>
            </div>
          </div>
        </div>
        <div class={'overflow-auto'}>
          <PageTable
            rowKey="id"
            onTableChange={(params, value) => getTableList(rowlist, loadTable, searchParam, params, value)}
            getSelectRowsCallBack={getSelectRowsCallBack}
            paging={paging.value}
            columnlist={columnlist.value}
            tableList={dataSource.value}
            isOpGroup={false}
            cellClick={cellClick}
            sizeChange={setSizeChange}
            opGroupCallBack={opGroupCallBack}
            loading={tableLoading.value}
          ></PageTable>
        </div>
      </>
    );
  }
});
